<template>
  <div :class="cardClass">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    className: {
      type: String,
      default: '',
    },
  },
  computed: {
    cardClass() {
      return `rounded-lg border bg-card text-card-foreground shadow-sm ${this.className}`;
    },
  },
};
</script>

<style scoped>
.border { border-width: 1px; border-color: #e5e7eb; /* gray-200 */ }
.bg-card { background-color: #ffffff; }
.text-card-foreground { color: #020817; /* gray-900 */ }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
</style>
